<template>
    <el-dialog
      :modelValue="visible"
      @update:modelValue="$emit('update:visible', $event)"
      title="富文本答案编辑" 
      width="60%"
    >
    <QuillEditor 
      v-model:content="content" 
      contentType="html"
      theme="snow"
    />
    <template #footer>
      <el-button @click="close">取消</el-button>
      <el-button type="primary" @click="save">保存</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import { QuillEditor } from '@vueup/vue-quill'
import { ref, watch } from 'vue'

const props = defineProps({
  visible: Boolean,
  initialContent: String
})

const emit = defineEmits(['save', 'close'])

const content = ref(props.initialContent || '')

const save = () => {
  emit('save', content.value)
  close()
}

const close = () => {
  emit('close')
}

watch(() => props.initialContent, (newVal) => {
  content.value = newVal
})
</script>

<style>
@import 'quill/dist/quill.snow.css';
</style>
